﻿
<script>
    /*var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        extraKeys: {"Ctrl-Space": "autocomplete"}
    });*/
      //Jstree
    $(function () {
        var cid = 1;
        var parent_node = 0;
        $("#tree").jstree({
    		"plugins" : [ 
    			"themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu" 
    		],
    		"json_data" : {
    			"ajax" : {
    				"url" : "http://insight.webm.vn/public/jtree/_demo/server.php",
    				"data" : function (n) {
    					return { 
    						"operation" : "get_children", 
    						"id" : n.attr ? n.attr("id").replace("node_","") : 1,
                            "cid" : cid,
                            "todate" : "",
                            "fromdate" :""
    					}; 
    				}
    			}
    		},
    		"search" : {
    			"ajax" : {
    				"url" : "http://insight.webm.vn/public/jtree/_demo/server.php",
    				"data" : function (str) {
    					return { 
    						"operation" : "search", 
    						"search_str" : str,
                            "cid" : cid
    					}; 
    				}
    			}
    		},
    		"types" : {
    			"max_depth" : -2,
    			"max_children" : -2,
    			"valid_children" : [ "drive" ],
    			"types" : {
    				"default" : {
    					"valid_children" : "none",
    					"icon" : {
    						"image" : "http://insight.webm.vn/public/jtree/images/file.png"
    					}
    				},
    				"folder" : {
    					"valid_children" : [ "default", "folder" ],
    					"icon" : {
    						"image" : "http://insight.webm.vn/public/jtree/images/folder.png"
    					}
    				},
    				"drive" : {
    					"valid_children" : [ "default", "folder" ],
    					"icon" : {
    						"image" : "http://insight.webm.vn/public/jtree/images/root.png"
    					},
    					"start_drag" : false,
    					"move_node" : false,
    					"delete_node" : false,
    					"remove" : false
    				}
    			}
    		},
    		"ui" : {
    			"initially_select" : [ "node_2" ]
    		},
    		"core" : {
    			"initially_open" : [ "node_2" , "node_3" ] 
    		}
    	})
    	.bind("create.jstree", function (e, data) {
    		$.post(
    			"http://insight.webm.vn/public/jtree/_demo/server.php", 
    			{ 
    				"operation" : "create_node", 
    				"id" : data.rslt.parent.attr("id").replace("node_",""), 
    				"position" : data.rslt.position,
    				"qname" : data.rslt.name,
    				"type" : data.rslt.obj.attr("rel"),
                    "cid" : cid,
                    "query" : $.cookie("query"),
                    "qdate" : "2014-03-13 11:15:44"
    			}, 
    			function (r) {
    				if(r.status) {
    					$(data.rslt.obj).attr("id", "node_" + r.id);
    				}
    				else {
    					$.jstree.rollback(data.rlbk);
    				}
    			}
    		);
    	})
    	.bind("remove.jstree", function (e, data) {
    		data.rslt.obj.each(function () {
    			$.ajax({
    				async : false,
    				type: 'POST',
    				url: "http://insight.webm.vn/public/jtree/_demo/server.php",
    				data : { 
    					"operation" : "remove_node", 
    					"id" : this.id.replace("node_",""),
                        "cid" : cid
    				}, 
    				success : function (r) {
    					if(!r.status) {
    						data.inst.refresh();
    					}
    				}
    			});
    		});
    	})
    	.bind("rename.jstree", function (e, data) {
    		$.post(
    			"http://insight.webm.vn/public/jtree/_demo/server.php", 
    			{ 
    				"operation" : "rename_node", 
    				"id" : data.rslt.obj.attr("id").replace("node_",""),
    				"qname" : data.rslt.new_name,
                    "cid" : cid
    			}, 
    			function (r) {
    				if(!r.status) {
    					$.jstree.rollback(data.rlbk);
    				}
    			}
    		);
    	})
    	.bind("move_node.jstree", function (e, data) {
    		data.rslt.o.each(function (i) {
    			$.ajax({
    				async : false,
    				type: 'POST',
    				url: "http://insight.webm.vn/public/jtree/_demo/server.php",
    				data : { 
    					"operation" : "move_node", 
    					"id" : $(this).attr("id").replace("node_",""), 
    					"ref" : data.rslt.cr === -1 ? 1 : data.rslt.np.attr("id").replace("node_",""), 
    					"position" : data.rslt.cp + i,
    					"qname" : data.rslt.name,
    					"copy" : data.rslt.cy ? 1 : 0,
                        "cid" : cid
    				},
    				success : function (r) {
    					if(!r.status) {
    						$.jstree.rollback(data.rlbk);
    					}
    					else {
    						$(data.rslt.oc).attr("id", "node_" + r.id);
    						if(data.rslt.cy && $(data.rslt.oc).children("UL").length) {
    							data.inst.refresh(data.inst._get_parent(data.rslt.oc));
    						}
    					}
    				}
    			});
    		});
    	})
        .bind("select_node.jstree", function (e, data) {
            try{
                var parent=data.inst._get_parent(data.rslt.obj);
                //parent.find('a').first().text(); get parent text name
                parent_node = parent.attr('id');
            }catch(e){return;}
        });

        $('#add_folder').click(function () {
    	   $("#tree").jstree("create", null, "last", { "attr" : { "rel" : this.id.toString().replace("add_", "") } });
        });

        //Save query
        $("#save_tab").click(function () {
            var demo = $('#tree');
            //id of node selected
            var id_node = demo.jstree('get_selected').attr('id').replace("node_","");
            //type of node selected
            var type_node = demo.jstree('get_selected').attr('rel');
            var name_node = demo.jstree('get_selected').text();

            if(type_node == 'default'){
                var saved = document.getElementById("saved");
                var content = document.getElementById("query").value;
                $.ajax({
                    type: "POST",
                    url: "public/jtree/_demo/_inc/update.php",
                    data:{
                        id: id_node,
                        content: content
                    },
                    beforeSend:function(){
                        $("#save_tab").css("opacity", 0.3);
                        document.getElementById('save_tab').disabled = true;
                    },
                    success:function(){
                        $('#saved').text("Query is saved in node"+name_node);
                        setTimeout(function(){
                            $('#saved').text("");
                            $("#save_tab").css("opacity", 1);
                            document.getElementById('save_tab').disabled = false;
                        },3000)

                    },
                    error:function(){
                        saved.innerHTML = "Query can't saved, please try agian!";
                        setTimeout(function(){ saved.innerHTML = ""; },3000)
                    }
                });
            }else{
                alert("Can't save query into parent node");
            }
        });

        //Save as query
        $("#save_as_tab").click(function () {
            $("#tree").jstree("create", "#"+parent_node, "last", { "attr" : { "rel" : "default" } });
        });
    });
</script>

<div id="jstree-marker" style="display: none;">»</div><div id="jstree-marker-line" style="display: none;"></div><div id="vakata-contextmenu"></div><div class="daterangepicker dropdown-menu opensright"><div class="calendar right"><div class="calendar-date"><table class="table-condensed"><thead><tr><th class="prev available">«</th><th colspan="5" style="width: auto">Mar 2014</th><th class="next available">»</th></tr><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead><tbody><tr><td class="off disabled" data-title="r0c0">23</td><td class="off disabled" data-title="r0c1">24</td><td class="off disabled" data-title="r0c2">25</td><td class="off disabled" data-title="r0c3">26</td><td class="off disabled" data-title="r0c4">27</td><td class="off disabled" data-title="r0c5">28</td><td class="off disabled" data-title="r0c6">1</td></tr><tr><td class="off disabled" data-title="r1c0">2</td><td class="available in-range" data-title="r1c1">3</td><td class="available in-range" data-title="r1c2">4</td><td class="available in-range" data-title="r1c3">5</td><td class="available in-range" data-title="r1c4">6</td><td class="available in-range" data-title="r1c5">7</td><td class="available in-range" data-title="r1c6">8</td></tr><tr><td class="available active end-date" data-title="r2c0">9</td><td class="available" data-title="r2c1">10</td><td class="available" data-title="r2c2">11</td><td class="available" data-title="r2c3">12</td><td class="available" data-title="r2c4">13</td><td class="available" data-title="r2c5">14</td><td class="available" data-title="r2c6">15</td></tr><tr><td class="available" data-title="r3c0">16</td><td class="available" data-title="r3c1">17</td><td class="available" data-title="r3c2">18</td><td class="available" data-title="r3c3">19</td><td class="available" data-title="r3c4">20</td><td class="available" data-title="r3c5">21</td><td class="available" data-title="r3c6">22</td></tr><tr><td class="available" data-title="r4c0">23</td><td class="available" data-title="r4c1">24</td><td class="available" data-title="r4c2">25</td><td class="available" data-title="r4c3">26</td><td class="available" data-title="r4c4">27</td><td class="available" data-title="r4c5">28</td><td class="available" data-title="r4c6">29</td></tr><tr><td class="available" data-title="r5c0">30</td><td class="available" data-title="r5c1">31</td><td class="available off" data-title="r5c2">1</td><td class="available off" data-title="r5c3">2</td><td class="available off" data-title="r5c4">3</td><td class="available off" data-title="r5c5">4</td><td class="available off" data-title="r5c6">5</td></tr></tbody></table></div></div><div class="calendar left"><div class="calendar-date"><table class="table-condensed"><thead><tr><th class="prev available">«</th><th colspan="5" style="width: auto">Mar 2014</th><th class="next available">»</th></tr><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead><tbody><tr><td class="available off" data-title="r0c0">23</td><td class="available off" data-title="r0c1">24</td><td class="available off" data-title="r0c2">25</td><td class="available off" data-title="r0c3">26</td><td class="available off" data-title="r0c4">27</td><td class="available off" data-title="r0c5">28</td><td class="available" data-title="r0c6">1</td></tr><tr><td class="available" data-title="r1c0">2</td><td class="available active start-date" data-title="r1c1">3</td><td class="available in-range" data-title="r1c2">4</td><td class="available in-range" data-title="r1c3">5</td><td class="available in-range" data-title="r1c4">6</td><td class="available in-range" data-title="r1c5">7</td><td class="available in-range" data-title="r1c6">8</td></tr><tr><td class="available in-range" data-title="r2c0">9</td><td class="available" data-title="r2c1">10</td><td class="available" data-title="r2c2">11</td><td class="available" data-title="r2c3">12</td><td class="available" data-title="r2c4">13</td><td class="available" data-title="r2c5">14</td><td class="available" data-title="r2c6">15</td></tr><tr><td class="available" data-title="r3c0">16</td><td class="available" data-title="r3c1">17</td><td class="available" data-title="r3c2">18</td><td class="available" data-title="r3c3">19</td><td class="available" data-title="r3c4">20</td><td class="available" data-title="r3c5">21</td><td class="available" data-title="r3c6">22</td></tr><tr><td class="available" data-title="r4c0">23</td><td class="available" data-title="r4c1">24</td><td class="available" data-title="r4c2">25</td><td class="available" data-title="r4c3">26</td><td class="available" data-title="r4c4">27</td><td class="available" data-title="r4c5">28</td><td class="available" data-title="r4c6">29</td></tr><tr><td class="available" data-title="r5c0">30</td><td class="available" data-title="r5c1">31</td><td class="available off" data-title="r5c2">1</td><td class="available off" data-title="r5c3">2</td><td class="available off" data-title="r5c4">3</td><td class="available off" data-title="r5c5">4</td><td class="available off" data-title="r5c6">5</td></tr></tbody></table></div></div><div class="ranges"><ul><li>This week</li><li>Last 7 days</li><li class="active">Last week</li><li>This month</li><li>Last 30 days</li><li>Last month</li><li>Custom Range</li></ul><div class="range_inputs"><div class="daterangepicker_start_input" style="float: left"><label for="daterangepicker_start">From</label><input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled"></div><div class="daterangepicker_end_input" style="float: left; padding-left: 11px"><label for="daterangepicker_end">To</label><input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled"></div></div></div></div>

</body>

</html>